<template>
  <div>
    <div class="h-panel-bar h-panel-no-border">
      <Button v-if="showButton == 2" @click="seClick" color="blue" icon="h-icon-check">选择</Button>
      <Button icon="h-icon-search" @click="query" v-if="showButton == 1">查询</Button>
      <Button v-if="showButton == 1" v-for="(item, i) in buttons" :key="i" :color="getColor(i)"
        :disabled="selectData.length == 0 && item.state == 0"
        @click="handle(!!item.tag ? item.tag : item.click, item.title)"><i :class="item.icon"></i>&nbsp;{{ item.title
        }}</Button>
      <div class="h-panel-right" v-if="showButton == 1 || showButton == 2">
        <div class="h-input-group">
          <div class="h-input-addon">
            <Select :datas="searchData" :deletable="false" :autosize="true" v-model="searchKey"
              :no-border="true"></Select>
          </div>
          <Search @search="search" v-model="searchVal" placeholder="搜索"></Search>
        </div>
      </div>
    </div>
    <div class="h-panel-body h-panel-no-border">
      <Table ref="table" :datas="datas" :checkbox="checkbox" :is-select-row="!checkbox" :height="height" :radio="radio"
        :stripe="stripe" :loading="loading" select-when-click-tr :columns="columns" @select="rowSelect"
        @trClick="trClick">
      </Table>
    </div>
    <div class="h-panel-bar" v-show="!noPage">
      <Pagination v-model="page" align="right" @change="loadData"></Pagination>
    </div>
  </div>
</template>

<script>
import { confirm, message } from 'heyui';

export default {
  name: "PaasPageTable",
  inject: ['parentMethods'],
  props: {
    showButton: {
      default: 1
    },
    checkbox: {
      default: false,
    },
    height: {
      default: 0,
    },
    radio: {
      default: false,
    },
    border: {
      default: true,
    },
    stripe: {
      default: false,
    },
    params: {},
    columns: {
      default: [],
    },
    id: {
      default: "id",
    },
    path: "",
    module: "",
    noPage: {
      default: false
    }
  },
  computed: {
    queryData() {
      return this.$store.queryData;
    },
    current() {
      return this.$store.menus.current;
    },
    menuData() {
      return this.$store.menus.data;
    },
    menuId() {
      return this.$store.menus.menuId;
    },
    buttonProxy() {
      return this.$store.buttonProxy;
    },
  },
  mounted() {
    this.columns.forEach((item, i) => {
      if (!!item.render) {
        return;
      }
      this.searchData.push({ value: item.prop, label: item.title });
      if (i == 0) {
        this.searchKey = item.prop;
      }
    });
    if (!!this.module && this.module != "") {
      this.url = this.module + "/page";
    } else if (!!this.path && this.path != "") {
      this.url = this.path;
    } else {
      this.url = this.$route.path + "/page";
    }
    if (this.showButton) {
      this.getMenuButtons();
    }
    this.$bus.on("ReloadData", () => {
      this.loadData();
    });
    this.selectData = [];
    this.loadData();
  },
  data() {
    return {
      url: "",
      colors: [
        "primary",
        "blue",
        "green",
        "yellow",
        "dark",
      ],
      buttons: [],
      loadingFlag: true,
      loading: false,
      datas: [],
      searchData: [],
      searchKey: "",
      searchVal: "",
      selectData: [],
      page: { page: 1, size: 10 },

    };
  },
  methods: {
    getColor(i) {
      if (i < this.colors.length) {
        return this.colors[i];
      } else if (i >= this.colors.length * 4) {
        return this.colors[i - this.colors.length * 4]
      } else if (i >= this.colors.length * 3) {
        return this.colors[i - this.colors.length * 3]
      } else if (i >= this.colors.length * 2) {
        return this.colors[i - this.colors.length * 2]
      } else if (i >= this.colors.length) {
        return this.colors[i - this.colors.length]
      }
    },
    getMenuButtons() {
      if (this.buttonProxy != "") {
        this.$post(this.buttonProxy + "/sysbuttons/getButtons/" + this.menuId).then(res => {
          this.buttons = res.data.data;
        });
      } else {
        let url = this.$route.path;
        this.buttons = this.readBtns(this.menuData, url);
      }
    },
    readBtns(menuData, url) {
      for (var i = 0; i < menuData.length; i++) {
        var item = menuData[i];
        if (item.key == url) {
          return item.buttons;
        }
        if (!!item.children) {
          var result = this.readBtns(item.children, url);
          if (!!result) {
            return result;
          }
        }
      }
    },
    loadData() {
      if (!this.loadingFlag) {
        return;
      } else {
        this.loadingFlag = false;
        setTimeout(() => {
          this.loadingFlag = true;
        }, 500);
      }
      this.loading = true;
      this.$post(this.url, {
        page: {
          current: this.page.page,
          size: this.page.size,
        },
        ...this.$store.queryData[this.current],
        ...this.params,
      })
        .then((res) => {
          this.loading = false;
          if (res.data == null) {
            this.datas = [];
            this.page.total = 0;
            return;
          }
          if (res.data.code != this.$success && res.msg != null) {
            message.error(res.msg);
            return;
          }
          if (!!res.data.data) {
            if (res.data.data.rows != null) {
              this.datas = res.data.data.rows;
            } else {
              this.datas = [];
            }
            this.page.total = res.data.data.total;
            return;
          } else {
            this.datas = [];
            this.page.total = 0;
          }

        });
    },
    rowSelect(data) {
      if (this.checkbox) {
        this.selectData = data;
      }
    },
    trClick(data) {
      if (!this.checkbox) {
        this.selectData = data;
      }
    },
    handle(name) {
      this.$store.setAction(name);
      this.$store.setSee(false);
      var supFunc = this.$parent[name];
      if (!supFunc) {
        supFunc = this.parentMethods && this.parentMethods[name];
      }
      if (!!supFunc && supFunc instanceof Function) {
        supFunc(this.selectData);
        return;
      } else if (!!this[name]) {
        this[name]();
      } else {
        console.error("按钮事件方法未找到：", name);
      }
    },
    search(val) {
      let data = {};
      this.selectData = [];
      data[this.searchKey] = val;
      this.$store.setQueryData(data);
      this.loadData();
    },
    query() {
      this.$store.setSee(false);
      this.$store.setAction("query");
      this.$store.setSubTitle("查询");
      this.$router.push(this.current + "/query");
    },
    add() {
      let id = this.getColumnId();
      this.$store.setSee(false);
      this.$store.setSubTitle("创建");
      if (!!id) {
        this.$router.push({
          path: this.current + "/form",
          query: {
            id: id,
          },
        });
      } else {
        this.$router.push(this.current + "/form");
      }
    },
    edit() {
      let id = this.getColumnId();
      if (id == null) {
        return;
      }
      this.$store.setSee(false);
      this.$store.setSubTitle("编辑");
      this.$router.push({
        path: this.current + "/form",
        query: {
          id: id,
        },
      });
    },
    del() {
      let id = this.getColumnId();
      if (id == null) {
        return;
      }
      confirm({
        content: '确定删除？',
        onConfirm: () => {
          let url = this.$store.menus.current + "/" + id;
          if (!!this.module) {
            url = this.module + "/" + id;
          }
          this.$delete(url).then(res => {
            let data = res.data;
            this.$dyAlert(data, false);
          });
        }
      });
    },
    see() {
      let id = this.getColumnId();
      if (id == null) {
        return;
      }
      this.$store.setSubTitle("查看");
      this.$store.setSee(true);
      this.$router.push({
        path: this.current + "/form",
        query: {
          id: id,
        },
      });
    },
    getColumnId() {
      let data = this.selectData;
      if (this.checkbox) {
        data = this.selectData[0];
      }
      if (data == null || data.length == 0) {
        if (this.$store.forms.action != "add") {
          message.warn("请选中任意列表数据");
        }
        return null;
      }

      let result = "";
      if (!this.id) {
        result = data[this.columns[0].prop];
      } else if (this.id instanceof Array) {
        this.id.forEach((item) => {
          result += data[item] + "&";
        });
        result = result.substring(0, result.length - 1);
      } else {
        result += data[this.id];
      }
      return result;
    },
    seClick() {
      this.$emit('seClick', this.selectData);
    }
  },
};
</script>